<template>
	<view class="im_content">
		<view class="im_swiperBlock">
			<swiper class="im_swiper" :indicator-dots="true" indicator-color="#eee" indicator-active-color="rgb(18, 150, 219)" :autoplay="true" :interval="5000" :circular="true" @change="currentCut" v-if="thisData.images">
				<swiper-item v-for="(image,n) in thisData.images" :key="n">
					<view class="swiper-item">
						<view class="im_img"><image :src="serverUrl + image" mode="aspectFill"></image></view>
					</view>
				</swiper-item>				
			</swiper>
			<view class="im_numBl">
				<text class="n">{{current}}</text> / <text class="m">{{thisData.images && thisData.images.length}}</text>		
			</view>
		</view>
		<!-- 日志 -->
		<view class="dia_content">
			<view class="dia_tiBlock">
				<view class="dia_name">
					<image :src="serverUrl + thisData.img" mode="aspectFill" class="dia_ico" @click="switchTapMy"></image>
					<text>{{thisData.child2}}</text>
				</view>
				<view :class="['dia_attention',attention?'active':'']" @click="attentionCut">{{attention?"已关注":"关注"}}</view>
				<text class="dia_title">{{thisData.text}}</text>
				<view class="dis_block" @click="unfoldCut">
					<view :class="{'dia_text':true,'active':unfold}">	
						<rich-text :nodes="thisData.value"></rich-text>
					</view>
					<view class="dia_unfold">{{unfold?'收起':'展开'}}</view>
				</view>
				<!-- 评论 -->
				<!-- <navigator url="../discuss/discuss" class="diList_block">
					<view class="diList_ul">
						<view class="diList_li">
							<text class="diList_name">冻宁走红:</text><text class="diList_text">乐园内设有亲子电玩、花样球池、弹力蹦床、趣味攀爬、玩具沙池、玩具体验、主题舞台</text>
						</view>
						<view class="diList_li">
							<text class="diList_name">是8:</text><text class="diList_text">乐园内设有亲子电玩、花样球池、弹力蹦床、趣味攀爬、玩具沙池、玩具体验、主题舞台</text>
						</view>
						<view class="diList_li">
							<text class="diList_name">是8:</text><text class="diList_text">乐园内设有亲子电玩、花样球池、弹力蹦床、趣味攀爬、玩具沙池、玩具体验、主题舞台</text>
						</view>
					</view>
					<text class="diList_more">查看全部8条评论</text>
				</navigator> -->
				<text class="dia_date">{{thisData.date | mmdd}}</text>
			</view>
		</view>
		<!-- 相关推荐 -->
		<view class="rec_content">
			<text class="rec_title">相关推荐</text>
			<view class="rec_block">
				<data-list :listData="thisData.list"></data-list>
			</view>
		</view>
		<!-- 评论块 -->
		<discuss :thisdata="thisData" :thisid="thisId"></discuss>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="base" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm">确定不再关注?</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import dataList from "../../components/dataList.vue" //数据列表组件
	import discuss from "../../components/discuss.vue" //评论组件
	export default {
		data() {
			return {
				current:1,//选中索引
				attention:false,//是否关注
				unfold:false ,//是否展开				    
				thisData:{} ,//当前数据与关联数据(list)
				thisId:1 ,//当前数据ID,
				serverUrl:this.serverUrl 
			}
		},
		components:{
			dataList,
			discuss
		},
		onLoad(arg){			
			this.thisId = parseInt(arg.id); //存储当前数据ID
			this.getList(); //获取列表
		},
		methods: {
			//选中切换
			currentCut(e){
				this.current = e.detail.current + 1				
			},
			//关闭提示框
			close() {			
				this.$refs.popup.close()
			},
			//关闭提示框并确认不再关注
			confirm(){
				this.attention = !this.attention
				this.close()
			},
			//关注切换
			attentionCut(){						
				if(this.attention){
					this.$refs.popup.open('dialog')						
				}else{
					this.attention = !this.attention					
				}							
			},
			//关注提交
			attentionSubmit(){
				
			},
			//展开切换
			unfoldCut(){
				this.unfold = !this.unfold
			},			
			//跳转Tabbar的my页面
			switchTapMy(){
				uni.switchTab({
					url:"../my/my"
				})
			},	
			//获取列表数据
			async getList(){
				const {data:res} = await this.$http({
					url: `d_list?id=${this.thisId}&&pagesize=6`				
				})					
				this.thisData = res.data
				console.log(this.thisData)									
			}
		},	
		filters:{
			mmdd:(date='')=>{
				return date.slice(5,10)
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/common.scss';
	.im_swiper {position: relative;width:100%;}
	.im_img {
		width:100%;
		image {
			width:100%;height:1080rpx;
		}
	}
	.im_swiper {height:1160rpx;}	
	.im_swiperBlock {position: relative;width:100%;}
	.im_numBl {position: absolute;right:5%;bottom:120rpx;background-color: rgba(0,0,0,0.5);color:#fff;padding:5rpx 20rpx;border-radius: 200rpx;}
	
	/* 日志 */
	.dia_content {position: relative;width:92%;margin:auto;margin-top:20rpx;}
	.dia_ico {width:100rpx;height: 100rpx;border-radius: 200rpx;}
	.dia_name text {position: relative;top:-35rpx;font-size:16px;margin-left:20rpx}
	.dia_attention {position: absolute;right:0;color:$ulColor;border:1px solid $ulColor;font-size:15px;padding:4rpx;border-radius: 200rpx;top:20rpx;width:120rpx;text-align: center;}
	.dia_attention.active {color:#999;border:1px solid #999}
	.dia_title {font-size:16px;margin-bottom:40rpx;display: block;margin-top:20rpx;line-height: 1.6em;}
	.dia_unfold {position: absolute;bottom:0;right:0;color:#000;}
	.dis_block {position: relative;padding-bottom:50rpx;margin-bottom:40rpx;}
	.dia_text {height:158rpx;overflow: hidden;position: relative;line-height: 1.8em;}
	.dia_text.active {height:auto;}
	.diList_block {position: relative;background: #f5f5f5;border-radius: 20rpx;padding:3% 4%;}
	.diList_name {color:#000000;font-weight: bold;margin-right:10rpx;}
	.diList_li {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom:10rpx;}
	.diList_more {color:$ulColor;}
	.dia_date {margin-top:20rpx;display: block;}
	
	/* 相关推荐*/
	.rec_content {position: relative;width:100%;padding-bottom:120rpx;}
	.rec_title {width: 92%;margin:auto;display: block;font-size:16px;margin-bottom:10rpx;margin-top:60rpx;}
</style>
